<template>
	<div class="release">
		<van-nav-bar :title="title" fixed left-arrow @click-left="back" />
		<div class="content">
			<div class="list">
				<div class="title">文章标题</div>
				<van-cell-group>
					<van-field v-model="detail.title" placeholder="单行输入" :border='false' />
				</van-cell-group>
			</div>
			<div class="list">
				<div class="title">选择站点</div>
				<van-cell-group>
					<van-field v-model="sitename" placeholder="请选择" right-icon="arrow-down" @click-right-icon="getsite" readonly />
					<van-popup v-model="showPicker" position="bottom">
						<van-picker show-toolbar :columns="columns" @cancel="showPicker = false" @confirm="onConfirm" />
					</van-popup>
				</van-cell-group>
			</div>
			<div class="list">
				<div class="title">选择文章分类</div>
				<van-cell-group>
					<van-field style="margin-bottom: 1rem;" v-model="onesite" placeholder="请选择" right-icon="arrow-down" @click-right-icon="showCate(2)" readonly />
					<van-field v-model="twosite" v-if="onesite!=''" placeholder="请选择" right-icon="arrow-down" @click-right-icon="showCate(3)" readonly />
				</van-cell-group>
			</div>
			<div class="list">
				<div class="title">上传封面</div>
				<van-uploader :after-read="afterRead" v-model="fileList" multiple :max-count="3" />
			</div>
			<div class="list">
				<div class="title">文章内容</div>
				<quill-editor class="editor" v-model="detail.postcontent" ref="myQuillEditor" @blur="onEditorBlur" @focus="onEditorFocus" @ready="onEditorReady"></quill-editor>
			</div>

		</div>
		<div class="button-sub">
			<van-button type="primary" block color="#FE7700" round @click="editData" v-if="type != 'new'">提交</van-button>
			<van-button type="primary" block color="#FE7700" round @click="pushData" v-if="type == 'new'">提交</van-button>
		</div>
	</div>
</template>

<script>
	export default {
		name: "Release",
		components: {},
		data() {
			return {
				type: this.$route.query.type,
				title: "发布文章",
				value: '',
				showPicker: false,
				columns: [],
				messages: '',
				fileList: [],
				article_id: '',
				detail: {},
				userInfo: {},
				sitelist: [],
				sitename: '',
				site_id: 0,
				pid: '',
				onesite: '',
				twosite: '',
				one: [],
				status: 0,
				one_id: '',
				two_id: '',
				imgBox: []
			}
		},
		mounted() {
			this.userInfo = JSON.parse(this.$getcookie("userInfo"))
			if (this.type == "new") {
				this.title = "发布文章"
			} else {
				this.title = "编辑文章"
				this.article_id = this.$route.query.id
				this.getDetail()
			}
			
		},
		methods: {
			getDetail() {
				this.$api.my.articleDetail({
					article_id: this.article_id
				}).then(res => {
					// 执行某些操作
					if (res.code == 1) {
						this.detail = res.data
						res.data.coverimages_text.forEach(item => {
							let obj = {}
							this.$set(obj, "url", item)
							this.fileList.push(obj)
						})
						
						this.imgBox = []
						this.fileList.forEach(item => {
							if (item.url) {
								this.imgBox.push(item.url)
							} else {
								this.uploadImg(item)
							}
						})

						let getData = {
							user_id: this.userInfo.user_id,
							token: this.$getcookie("jy_token"),
						}
						this.$api.my.userSite(getData).then(resd => {
							// 执行某些操作
							if (resd.code == 1) {
								this.sitelist = resd.data
								this.sitelist.forEach(item => {
									if (this.detail.site_id == item.site_id) {
										this.detail.site_id = item.site_id
										this.sitename = item.sitename + '站'
									}
								})
								let setData = {
									user_id: this.userInfo.user_id,
									token: this.$getcookie("jy_token"),
									site_id:this.detail.site_id,
									pid:this.pid
								}
								this.$api.my.category(setData).then(resq => {
									// 执行某些操作
									if (resq.code == 1) {
										resq.data.forEach(item => {
											if (this.detail.first == item.id) {
												this.onesite = item.name
												this.one_id = item.id
												this.pid = item.id
											}
										})
										let secondData = {
											user_id: this.userInfo.user_id,
											token: this.$getcookie("jy_token"),
											site_id:this.detail.site_id,
											pid:this.pid
										}
										
										this.$api.my.category(secondData).then(resw => {
											// 执行某些操作
											if (resw.code == 1) {
												resw.data.forEach(item => {
													if (this.detail.second == item.id) {
														this.twosite = item.name
														this.two_id = item.id
														
														
													}
												})
												
												
										
											}
										
										})
										
										

									}

								})

							}


						})
					}

				})




			},
			getsite() {
				this.columns = []

				let getData = {
					user_id: this.userInfo.user_id,
					token: this.$getcookie("jy_token"),
				}

				this.$api.my.userSite(getData).then(res => {
					// 执行某些操作
					if (res.code == 1) {
						this.sitelist = res.data
						this.sitelist.forEach(item => {
							this.columns.push(item.sitename + '站')

						})
						this.showPicker = true
						this.status = 1
					}


				})

			},
			showCate(type) {
				this.showPicker = true
				this.status = type
				if (type == 2) {
					this.pid = ''
				}
				this.getCate()

			},

			getCate() {
				this.columns = []
				let setData = {
					user_id: this.userInfo.user_id,
					token: this.$getcookie("jy_token"),
					site_id: this.detail.site_id,
					pid: this.pid
				}
				this.$api.my.category(setData).then(res => {
					// 执行某些操作
					if (res.code == 1) {
						if (this.status == 2) {
							this.one = res.data
						} else {
							this.two = res.data
						}

						res.data.forEach(item => {
							this.columns.push(item.name)

						})

					}

				})
			},
			back() {
				this.$router.go(-1)
			},
			onConfirm(value, index) {
				if (this.status == 1) {
					this.sitename = value;
					this.detail.site_id = this.sitelist[index].site_id
					this.onesite = ''
					this.twosite = ''
				} else if (this.status == 2) {
					this.onesite = value;
					this.pid = this.one[index].id
					this.one_id = this.one[index].id
					this.twosite = ''
					this.getCate()
				} else {
					this.twosite = value;
					this.two_id = this.two[index].id
				}

				this.showPicker = false;
			},
			afterRead(file) {
				this.imgBox = []
				this.fileList.forEach(item => {
					if (item.url) {
						this.imgBox.push(item.url)
					} else {
						this.uploadImg(item)
					}
				})
			},
			onEditorBlur() {},

			onEditorFocus() {},

			onEditorReady() {},
			//编辑文章
			editData() {
				let postData = {
					user_id: this.userInfo.user_id,
					token: this.$getcookie("jy_token"),
					site_id: this.detail.site_id,
					id: this.article_id,
					first: this.one_id,
					second: this.two_id,
					title: this.detail.title,
					postcontent: this.detail.postcontent,
					coverimages: this.imgBox.join(",")
				}
				
				this.$nextTick(() => {
					this.$api.my.edit(postData).then(res => {
						// 执行某些操作
						if (res.code == 1) {
							this.$toast.success(res.msg)
						} else {
							this.$toast.fail(res.msg)
						}

					})
				})
			},
			//发布文章
			pushData() {
				let postData = {
					user_id: this.userInfo.user_id,
					token: this.$getcookie("jy_token"),
					site_id: this.detail.site_id,
					first: this.one_id,
					second: this.two_id,
					title: this.detail.title,
					postcontent: this.detail.postcontent,
					coverimages: this.imgBox.join(",")
				}
				
				this.$nextTick(() => {
					this.$api.my.add(postData).then(res => {
						// 执行某些操作
						if (res.code == 1) {
							this.$toast.success(res.msg)
						} else {
							this.$toast.fail(res.msg)
						}
			
					})
				})
			},
			
			//上传图片
			uploadImg(file) {
				const formData = new FormData()
				formData.append("file", file.file)
				this.$api.my.upload(formData).then(res => {
					// 执行某些操作
					if (res.code == 1) {
						this.imgBox.push(res.data.show_url)
					}
				})

			}
		}


	}
</script>

<style scoped lang="less">
	.release {
		padding-top: 46px;

		.van-nav-bar {
			.van-icon {
				color: #000;
			}
		}

		.button-sub {
			width: 16.56rem;
			margin: 3.28rem auto;
		}

		.van-button {
			height: 3.06rem;
			font-size: 0.94rem;
			font-family: PingFang SC;
			font-weight: 500;
			color: rgba(255, 255, 255, 1);
			line-height: 3.06rem;
		}

		.content {
			margin-top: 0.59rem;
			background: #fff;
			padding: 1.75rem 1.81rem;

			.list {
				margin-bottom: 1.47rem;

				.title {
					font-size: 0.88rem;
					font-family: PingFang SC;
					font-weight: 500;
					color: rgba(74, 74, 74, 1);
					margin-bottom: 0.84rem;
				}

				.van-cell {
					width: 17.06rem;
					height: 2.56rem;
					border: 1px solid rgba(191, 191, 191, 1);
					border-radius: 0.5rem;
					line-height: 1;
				}

				.van-hairline--top-bottom::after,
				.van-hairline-unset--top-bottom::after {
					display: none;
				}
			}
		}
	}
</style>
